<template>
  <div class="add-fee">
    <div class="search-content">
      <super-search :search-form="searchForm" :search-item-config="searchItemList" @search="searchHandle"></super-search>
    </div>
    <div class="table-content">
      <super-table
        height="350"
        ref="tableRef"
        :hasCustomField="false"
        v-model:page="searchForm.pageNum"
        v-model:limit="searchForm.pageSize"
        :loading="loading"
        :data="tableData"
        :total="searchForm.total"
        :column="tableColumn"
        @change-page="getData"
        mode="modal"
      >
      </super-table>
    </div>
    <div class="opeartion-btn">
      <label for="#">账单:</label>
      <a-select v-model="formState.receivableBillId" placeholder="请选择">
        <a-select-option v-for="(item, index) in passData" :key="index" :value="item.id">{{ item.billNum }}</a-select-option>
      </a-select>
      <a-button type="primary" @click="addFeeHandle" v-debounce>移入费用</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { searchItemList, tableColumn } from "./data";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: ReceivableStatement.ListRows[];
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "submit"): void;
}>();
const { passData, visible } = toRefs(props);
const { searchForm, loading, tableData, formState, tableRef } = InitHook();
const { searchHandle, resetFields, getData, addFeeHandle } = OperationHook({ searchForm, loading, tableData, passData, tableRef, emit });
searchHandle();

watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      searchHandle();
    } else {
      resetFields();
      formState.receivableBillId = "";
    }
  }
);
</script>
<style lang="stylus" scoped>
.add-fee{
    height: 480px;
    background-color: #fff;
    .table-content{

    }
    .opeartion-btn{
        text-align: left;
        margin-top: -28px;
        >label{
            padding-right: 8px;
        }
        :deep(.ant-select){
            width: 280px;
            margin-right: 8px
        }
    }
}
</style>
